<template>
	<view class="content0">
		<view class="content1">
			<image class="image1" src="../../static/user/sousuo.png" mode="aspectFit"></image>
			<input class="input1" v-model="inf" placeholder="请输入汽车名称"/>
			<view class="text1" @click="search1">搜索</view>
		</view>
		<view>
			<swiper class="swiper1" autoplay="true" >
				<swiper-item class="item1"><image class="img2" src="../../static/car1.png" mode="aspectFit"></image></swiper-item>
				<swiper-item class="item1"><image class="img2" src="../../static/car2.png" mode="aspectFit"></image></swiper-item>
				<swiper-item class="item1"><image class="img2" src="../../static/car3.png" mode="aspectFit"></image></swiper-item>
			</swiper>
		</view>
		<view class="Grid">
			<view class="Grid-Item" v-for="item in List" :key="item.id" @click="tobuy(item.id)">
				<view class="GSimg">
					<image class="Image" :src="item.image" mode="aspectFit"></image>
				</view>
				<view class="GStitle">{{ item.carname }}</view>
				<view class="GStitle1">{{ item.caradd }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			List:[],
			inf:""
			}
		},
		onShow() {
			console.log(uni.getStorageSync('username'));
			uni.request({
				url: 'http://116.62.213.195/car.php',
				data:{
					method: 'show'
				},
				header: {'content-type' : "application/x-www-form-urlencoded"},
				method:'POST',
				success: res =>{
					if(res.data.code == '200'){
						this.List=JSON.parse(JSON.stringify(res.data.data));
				    }else{
						this.List=[];
				        console.log("加载失败");
				    }
				}
			});
		},
		onLoad() {
			
		},
		methods: {
			tobuy:function(id){
				console.log(id);
				let minf = uni.getStorageSync('mumber');
				if(minf == '1'){
					uni.navigateTo({
						url:'../buy/buy?id='+id
					})
				}else{
					uni.showToast({title: "非会员不允许查看，请先注册会员", icon:"none"});
				}
				
			},
			search1:function(){
				uni.request({
					url: 'http://116.62.213.195/car.php',
					data:{
						method: 'sear',
						carname: this.inf
					},
					header: {'content-type' : "application/x-www-form-urlencoded"},
					method:'POST',
					success: res =>{
						if(res.data.code == '200'){
							this.List=JSON.parse(JSON.stringify(res.data.data));
					    }else{
							this.List=[];
					        console.log("加载失败");
					    }
					}
				});
			}
		}
	}
</script>

<style>
.content0{
	width: 100%;
	height: 1px;
	background-color:#fafafa;
}
.content1{
	margin: auto;
	margin-top:5px;
	display: flex;
	flex-direction: row;
}
.image1{
	margin: auto;
	width: 30px; 
	height: 30px;
}
.input1{
	margin: auto;
	width: 73%;
	height: 30px;
	border-radius: 7px;
	border:1px solid #7a7a7a;
}
.text1{
	width: 60px;
	height: 30px;
	font-family: 'Courier New', Courier, monospace;
	font-weight: 100;
	font-size: 160%;
}
.swiper1{
	margin-top:10px;
	width: 100%;
	height: 140px;
	background-color: #ffffff;
}
.item1{
	width: 100%;
	height: 100%;
	background-color: #ffffff;
}
.Grid{
	display: flex;
	flex-wrap: wrap;
	width: auto;
	height: 90px;
}
.Grid-Item{
	margin-top:5px;
	width: 49%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	background-color: #f2fff5;
	border-radius: 7px;
	border:1.5px solid #7a7a7a;
}
.GSimg{
	
}
.Image{
	width: 60px;
	height: 60px;
}
.GStitle{
	margin: auto;
	width: 49%;
}
.GStitle1{
	text-align: center;
	width: 100%;
}
.img2{
	width: 100%;
	height: 100%;
}
</style>
